import React from "react";
import { Typography, Card, Divider, Space, Alert } from "antd";
import ZustandDemo from "./ZustandDemo";
import "./ZustandDemo.css";

const { Title, Paragraph } = Typography;

const ZustandPage: React.FC = () => {
  return (
    <div className="page-container">
      <Title level={2}>Zustand 状态管理</Title>

      <Card className="section-card">
        <Typography>
          <Title level={4}>什么是 Zustand?</Title>
          <Paragraph>
            Zustand 是一个轻量级的状态管理库，专为 React
            应用设计。它采用了简单的 API 和基于 hooks
            的方法来管理状态，无需样板代码，也不需要 Provider 包装。
          </Paragraph>

          <Alert
            message="Zustand 的核心优势"
            description={
              <ul>
                <li>极简 API，易于学习和使用</li>
                <li>基于 hooks，完全拥抱函数式组件</li>
                <li>无需 Provider，避免组件树包装</li>
                <li>支持状态选择器，实现精细渲染控制</li>
                <li>支持中间件，如持久化、日志等</li>
                <li>完全类型安全，对 TypeScript 友好</li>
              </ul>
            }
            type="info"
            showIcon
          />
        </Typography>
      </Card>

      <Divider orientation="left">实例演示</Divider>

      <Card className="section-card">
        <ZustandDemo />
      </Card>

      <Divider orientation="left">代码示例</Divider>

      <Card className="section-card">
        <Typography>
          <Title level={4}>创建 Store</Title>
          <Paragraph>
            <pre>
              {`import { create } from 'zustand'

interface CounterState {
  count: number
  increment: () => void
  decrement: () => void
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}))`}
            </pre>
          </Paragraph>

          <Title level={4}>在组件中使用</Title>
          <Paragraph>
            <pre>
              {`import { useCounterStore } from './stores/counterStore'

function Counter() {
  const { count, increment, decrement } = useCounterStore()
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  )
}`}
            </pre>
          </Paragraph>

          <Title level={4}>使用选择器优化渲染</Title>
          <Paragraph>
            <pre>
              {`// 只订阅需要的状态，其他状态变化不会触发组件重渲染
function CounterValue() {
  const count = useCounterStore((state) => state.count)
  return <h1>{count}</h1>
}

function Controls() {
  const { increment, decrement } = useCounterStore(
    (state) => ({ 
      increment: state.increment, 
      decrement: state.decrement 
    })
  )
  
  return (
    <>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </>
  )
}`}
            </pre>
          </Paragraph>
        </Typography>
      </Card>

      <Divider orientation="left">进阶用法</Divider>

      <Card className="section-card">
        <Space direction="vertical" style={{ width: "100%" }}>
          <Alert
            message="添加中间件"
            description={
              <pre>
                {`import { create } from 'zustand'
import { persist } from 'zustand/middleware'

export const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }))
    }),
    { name: 'counter-storage' } // 本地存储的键名
  )
)`}
              </pre>
            }
            type="info"
          />

          <Alert
            message="异步操作"
            description={
              <pre>
                {`import { create } from 'zustand'

export const useUserStore = create((set) => ({
  user: null,
  loading: false,
  error: null,
  
  // 异步操作示例
  fetchUser: async (id) => {
    set({ loading: true, error: null })
    try {
      const response = await fetch(\`/api/users/\${id}\`)
      const user = await response.json()
      set({ user, loading: false })
    } catch (error) {
      set({ error: error.message, loading: false })
    }
  }
}))`}
              </pre>
            }
            type="info"
          />
        </Space>
      </Card>
    </div>
  );
};

export default ZustandPage;
